<template>
    <div class="ClassificaTion">
      <div>
        <el-select v-model="value" placeholder="门店">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary">搜索</el-button>
        <el-button type="success">添加</el-button>
        <el-button type="danger">删除所有分类</el-button>
      </div>
  
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" height="450px"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" text-align="center">
        </el-table-column>
        <el-table-column prop="id" label="编号/名称">
  
        </el-table-column>
        <el-table-column prop="key" label="编号/类型">
        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="{row}">
            <img :src="row.icon" alt="" width="70px ">
          </template>
        </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="{row}">
            <img :src="row.pic" alt="" width="70px ">
          </template>
        </el-table-column>
  
        <el-table-column prop="statusStr" label="状态">
          <template slot-scope="{row}">
            <el-tag type="success" v-if='row.statusStr = "显示"'>正常</el-tag>
            <el-tag type="danger" v-else>停用</el-tag>
          </template>
  
        </el-table-column>
        <el-table-column prop="address" label="操作" width="300" style="text-align:center">
          <template slot-scope="{row}">
  
            <el-button type="text" style="color:#409eff" @click="edit(row)"> {{ row.date }}编辑</el-button>
            <el-button type="text" style="color:red" @click="del(row)">删除</el-button>
          </template>
  
  
        </el-table-column>
      </el-table>
      <el-button type="danger" @click="delAll">批量删除</el-button>
  
    </div>
  </template>
  
  <script>
  import { mallfenlei } from "@/api/index"
  export default {
    name: 'ClassificaTion',
    data() {
      return {
        tableData: [],
  
        options: [{
          value: '选项1',
          label: '全局分类'
        }],
        value: '',
      }
    },
  
    methods: {
      // 请求接口获取后端数据
      async getAdminlist(params) {
  
        let { data: res } = await mallfenlei(params)
        console.log(res);
        this.tableData = res
  
        console.log(this.tableData)
  
      },
      handleSelectionChange(val) {
        console.log(val)
        this.multipleSelection = val;
      },
      // 编辑
      edit(row) {
        console.log(row)
      },
  
      del(row) {
        console.log(row)
      },
      // 批量删除
      delAll() {
        // 后端接口需要的是ID,所以需要把获取的数组转成只有id的数组传给后端
        this.multipleSelection = this.multipleSelection.map(r =>
          r.id
        )
        console.log(this.multipleSelection);
  
      },
  
    },
    mounted() {
      this.getAdminlist()
    },
  }
  </script>
  <style lang="scss" scoped>
  .CATEGORY {
  
    &::v-deep td,
    th .cell {
      text-align: center;
    }
  
    &::v-deep .el-table th.el-table__cell>.cell {
      text-align: center;
    }
  }
  </style>